<template>
    <div>Home</div>
    <br />
    <RouterLink to="/docs/menu">菜单</RouterLink>
    <br />
    <RouterLink to="/TestPage/1">测试页面1</RouterLink>
    <br />
    <RouterLink to="/TestPage/2">测试页面2</RouterLink>
    <br />
    <RouterLink to="/TestPage/3">测试页面3</RouterLink>
    <br />
    <RouterLink to="/TestPage/list/3">测试链接打开页面</RouterLink>
    <CTable size="small" ref="CTableView" bordered>
        <a-table-column title="Age" data-index="age" />
        <a-table-column title="Address" data-index="address" />
        <a-table-column title="Name" data-index="name" />
        <a-table-column title="foramt" type="format" formatStr="${name}--AA--${address}" />
        <a-table-column title="dict" data-index="city" type="dict" dict="city" showKey="label" valueKey="value" />
        <a-table-column title="FilterValue" type="FilterValue" defaultStr="-" />
        <a-table-column key="action" title="Action">
            <template #default="{ record }">
                <span>
                    <a>Action 一 {{ record.Age }}</a>
                    <a-divider type="vertical" />
                    <a>Delete</a>
                </span>
            </template>
        </a-table-column>
    </CTable>
    <filterView v-model:value="filterData">
        <filterItem type="input" label="字符串" itemkey="input" />
        <filterItem type="selectInput" label="key值选择器" itemkey="selectInput" :options="[
            { itemkey: 'selectInput-number', valueType: 'number', label: '数字', max: 11 },
            { itemkey: 'selectInput-string', valueType: 'string', label: '字符串', max: 20 },
        ]" />
        <filterItem type="phone" label="手机号" itemkey="phone" />
        <a-form-item>
            <a-button type="primary" @click="console.log(filterData)">Console</a-button>
        </a-form-item>
    </filterView>
</template>
<script setup>
import { onMounted, onUnmounted, onActivated, onDeactivated, ref, watch } from "vue";
import useHttp from "@/@base/use/useHttp";
const http = useHttp();

const CTableView = ref();

const filterData = ref({});



watch(filterData, val => {
    console.log(val);
}, { deep: true })

onMounted(() => {
    console.log('onMounted :页面加载');
    // http.post('http://www.baidu.com', {}, {}).then(res => {
    //     console.log(res);
    // });
    CTableView.value.SetAjax((parmas) => {
        var body = {
            ...filterData.value,
            ...parmas
        }
        // 模拟 Ajax 运行代码
        // 由于表格中自带loading，顾页面中不显示loading
        return http.text('', {}, body, { loading: false }).then(() => {
            return {
                list: [{
                    key: '1',
                    name: 'John Brown',
                    age: 32,
                    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
                    tags: ['nice', 'developer'],
                    city: '01'
                }, {
                    key: '2',
                    name: 'Jim Green',
                    age: 42,
                    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
                    tags: ['loser'],
                    city: '02'
                }, {
                    key: '3',
                    name: 'Joe Black',
                    age: 32,
                    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
                    tags: ['cool', 'teacher'],
                    city: '03'
                }],
                total: 100
            }
        })
    })
})

onActivated(() => {
    console.log('onActivated : 页面当前是焦点状态');
})
onDeactivated(() => {
    console.log('onDeactivated : 页面离开焦点状态');
})

onUnmounted(() => {
    console.log('onUnmounted : 页面注销')
})

</script>
<style scoped lang="less"></style>